<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-cache/no-store" />
  <title>我的qc质检</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="my-qcreport">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button v-if="selectReportList.length>0" size="medium" type="primary" @click="deleteReports()">批量删除</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search" :user="user" type="my"></search-form>
        </div>
      </search-btn-view>

      <div class="my-qcreport-table-div">
        <el-table border fit :data="reportList" style="width: 100%" height="parent" :span-method="spanMethod" :row-class-name="setRowClassName"
          @selection-change="selectionChange" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave" @row-click="handleRowClick">
          <el-table-column type="selection" column-key="selection" width="40px" :selectable="checkSelect" align="center"></el-table-column>
          <el-table-column label="系统编号" prop="orderId" min-width="130px" header-align="center"></el-table-column>
          <el-table-column label="订单编号" prop="companyOrderId" min-width="130px" header-align="center"></el-table-column>
          <el-table-column label="工厂型号" prop="factoryId" min-width="110px" header-align="center"></el-table-column>
          <el-table-column label="客户型号" prop="customerId" min-width="110px" header-align="center"></el-table-column>
          <el-table-column label="工序" prop="processName" min-width="110px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="质检类型" column-key="type" width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('productMgr.qcReport.type.'+scope.row.type)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="图片" column-key="img" width="90px" align="center">
            <template slot-scope="scope">
              <el-image class="qcreport-img" v-if="scope.row.img" :src="formatImgUrl(scope.row.img)" fit="scale-down"
                :preview-src-list="[formatImgUrl(scope.row.img)]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="质检时间" column-key="createTime" width="90px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.createTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="审核状态" column-key="status" width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('productMgr.qcReport.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="可审核人" column-key="canApprovalNameList" min-width="120px" header-align="center">
            <template slot-scope="scope" v-if="scope.row.status===0">
              <span>{{scope.row.canApprovalNameList.join(',')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" column-key="remark" min-width="120px" header-align="center">
            <template slot-scope="scope" v-if="scope.row.status===0">
              <span v-html="getTextHtml(scope.row.remark)"></span>
            </template>
          </el-table-column>
          <el-table-column label="qc质检内容" header-align="center">
            <el-table-column label="内容" prop="content" min-width="120px" header-align="center"></el-table-column>
            <el-table-column label="默认值" prop="reportValue" min-width="100px" header-align="center"></el-table-column>
            <el-table-column label="结果" column-key="result" min-width="80px" align="center">
              <template slot-scope="scope">
                <span>{{i18n.getMsg('productMgr.qcReport.result.'+scope.row.result)}}</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top:5px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog title="质检记录详情" :visible.sync="openDetail" width="600px" top="5vh" @closed="selectReport=null">
      <div style="height:calc(80vh - 54px);overflow:auto">
        <report-detail v-if="openDetail" :report="selectReport" type="my"></report-detail>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/pageSelect.css",
    "../qcReportApproval/css/searchForm.css",
    "../qcReportApproval/css/reportDetail.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/pageSelect.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/mixins/datePickerOptionsMixin.js"
  ]);

</script>
<script src="../models/qcReport.js"></script>

<script src="../qcReportApproval/searchForm.js"></script>
<script src="../qcReportApproval/reportDetail.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        order: '',
        workShopId: '',
        processId: '',
        startTime: null,
        endTime: null,
        status: '',
        type: '',
        result: ''
      };
      return {
        loading: false,
        reportList: [],
        selectReportList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        user: null,
        i18n: i18n,
        moment: moment,
        hoverReportId: "",
        selectReport: null,
        openDetail: false
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setUser().then(function () {
        self.setReportList(true);
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setUser: function () {
        var self = this;
        return SysUtil.getUser().then(function (user) {
          self.user = user;
          return user;
        });
      },

      setReportList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var pageSize = pagination.pageSize;
        var start = (pagination.currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };
        this.setPostData(postData);

        this.loading = true;
        var self = this;
        ajaxRequest('procedure/getQcReportDataSelf', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var reportList = res.returnData;
          if (SysUtil.isEmpty(reportList)) {
            reportList = [];
          }
          if (reportList.length === 0 && pagination.currentPage !== 1) {
            self.pagination.totalCount = res.iTotalRecords;
            self.$nextTick(function () {
              self.setReportList(isSearch);
            });
            return;
          }

          var reports = [];
          for (var i = 0; i < reportList.length; i++) {
            var report = reportList[i];
            var detailList = report.detail;
            detailList = _.orderBy(detailList, ['rowIndex'], ['asc']);
            for (var j = 0; j < detailList.length; j++) {
              var detail = detailList[j];
              var reportObj = new QcReportModel(report, detail);
              reportObj.detailList = detailList;
              reportObj.groupIndex = j;
              reportObj.rowIndex = i;
              reports.push(reportObj);
            }
          }

          self.reportList = reports;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      setPostData: function (postData) {
        var search = this.search;
        var fields = ['workShopId', 'processId', 'status', 'type', 'result'];
        SysUtil.setPostData(postData, search, fields);

        var startTime = search.startTime;
        if (startTime !== null) {
          postData.startTime = moment(startTime).format('YYYY-MM-DD');
        }

        var endTime = search.endTime;
        if (startTime !== null) {
          postData.endTime = moment(endTime).format('YYYY-MM-DD');
        }

        var order = search.order;
        if (order !== '') {
          postData.orderId = order.orderId;
        }
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setReportList(true);
      },

      pageChange: function () {
        this.setReportList();
      },

      deleteReport: function (report) {
        var self = this;
        this.$confirm('是否确定删除该条qc质检记录', '删除确认', {
          confirmButtonText: '是',
          cancelButtonText: '否'
        }).then(function () {
          self.toDeleteReports(report);
        }).catch(function () {});
      },

      deleteReports: function () {
        var self = this;
        this.$confirm('是否确定删除所选中的qc质检记录', '删除确认', {
          confirmButtonText: '是',
          cancelButtonText: '否'
        }).then(function () {
          self.toDeleteReports();
        }).catch(function () {});
      },

      toDeleteReports: function (report) {
        var ids = [];
        if (report !== undefined) {
          ids = [report.id];
        } else {
          var reportList = this.selectReportList;
          ids = _.map(reportList, 'id');
        }

        this.loading = true;
        var self = this;
        ajaxRequest('procedure/approvalQCReport', {
          idArray: JSON.stringify(ids),
          status: 3
        }).then(function () {
          self.$alert('qc质检记录成功删除', '信息', {
            callback: function () {
              self.setReportList();
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      checkSelect: function (row) {
        var status = row.status;
        return [0, 2].indexOf(status) !== -1;
      },

      selectionChange: function (reports) {
        this.selectReportList = reports;
      },

      spanMethod: function (option) {
        var column = option.column;
        var columnKey = column.columnKey;
        if (['content', 'reportValue', 'result'].indexOf(columnKey) !== -1) {
          return [1, 1];
        }

        var row = option.row;
        var groupIndex = row.groupIndex;
        if (groupIndex !== 0) {
          return [0, 0];
        }
        var len = row.detailList.length;
        return [len, 1];
      },

      handleMouseEnter: function (report) {
        this.hoverReportId = report.id;
      },

      handleMouseLeave: function (report) {
        this.hoverReportId = "";
      },

      setRowClassName: function (option) {
        var report = option.row;
        var rowIndex = report.rowIndex;
        var className = '';
        if (!SysUtil.isEmpty(rowIndex)) {
          className = rowIndex % 2 === 0 ? 'even' : 'odd';
        }

        var hoverReportId = this.hoverReportId;
        if (hoverReportId === '') {
          return className;
        }

        if (report.detailList.length <= 1) {
          return className;
        }
        if (report.id === hoverReportId) {
          if (className === '') {
            className = 'hover-row';
          } else {
            className += ' hover-row';
          }
          return className;
        }
        return className;
      },

      handleRowClick: function (report, column) {
        var columnKey = column.columnKey;
        if (['selection', 'img'].indexOf(columnKey) !== -1) {
          return;
        }

        this.selectReport = report;
        this.openDetail = true;
      },

      getTextHtml: function (text) {
        if (SysUtil.isEmpty(text)) {
          return '';
        }
        var htmlText = _.escape(text);
        htmlText = htmlText.replace(/ /g, '&nbsp;').replace(/\n/g, '<br>');
        return htmlText;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      ReportDetail: ReportDetail
    }
  });

</script>
<style>
  .my-qcreport {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .my-qcreport .my-qcreport-table-div {
    flex: 1;
    overflow: auto;
  }

  .my-qcreport .qcreport-img {
    width: 80px;
    height: 80px;
  }

  .my-qcreport .el-table table .odd{
    background: #FAFAFA;
  }

</style>

</html>
